<template>
  <div class="geo-label-option">
    <tm-group :label="title">
      <el-form-item label="边界颜色">
        <el-color-picker v-model="data.borderColor" show-alpha/>
      </el-form-item>
      <el-form-item label="边界粗细">
        <el-input-number v-model="data.borderWidth"/>
      </el-form-item>
      <el-form-item label="边界线条" style="width: 100%;">
        <tm-radio v-model="data.borderType" :data="borderTypeList"></tm-radio>
      </el-form-item>
      <el-form-item label="DashOffset">
        <el-input-number v-model="data.borderDashOffset"/>
      </el-form-item>
      <el-form-item label="阴影颜色" style="width: 100%;">
        <el-color-picker v-model="data.shadowColor" show-alpha/>
      </el-form-item>
      <el-form-item label="阴影X偏移">
        <el-input-number v-model="data.shadowOffsetX"/>
      </el-form-item>
      <el-form-item label="阴影Y偏移">
        <el-input-number v-model="data.shadowOffsetY"/>
      </el-form-item>
      <el-form-item label="模糊">
        <el-input-number v-model="data.shadowBlur"/>
      </el-form-item>
      <el-form-item label="透明度" >
        <el-input-number v-model="data.opacity" :min="0" :max="1" :step="0.1"/>
      </el-form-item>
      <el-form-item label="背景类型" style="width: 100%;">
        <tm-radio v-model="data.colorType" :data="colorTypeList"></tm-radio>
      </el-form-item>

      <el-form-item label="纯色" v-if="data.colorType === '0'">
        <el-color-picker v-model="data.areaColor" show-alpha/>
      </el-form-item>

      <el-form-item label="线性渐变" v-if="data.colorType === '1'" style="width: 100%;">
       <div class="flex2">
         <el-form-item label="x1" class="mb0"><el-input-number v-model="data.linear.x" :min="0" :step="0.1"/></el-form-item>
         <el-form-item label="x2" class="mb0"><el-input-number v-model="data.linear.x2" :min="0" :step="0.1"/></el-form-item>
         <el-form-item label="y1" class="mb0"><el-input-number v-model="data.linear.y" :min="0" :step="0.1"/></el-form-item>
         <el-form-item label="y2" class="mb0"><el-input-number v-model="data.linear.y2" :min="0" :step="0.1"/></el-form-item>
       </div>
        <el-form-item label="应用全局">
          <el-switch v-model="data.linear.global"/>
        </el-form-item>
        <el-form-item label="颜色">
          <i class="el-icon-plus color-ctrl" @click="onAdd(data.linear.colorStops)"/>
          <div class="color-line" v-for="(color, cIndex) in data.linear.colorStops" :key="cIndex">
            <el-input-number class="color-line-item" v-model="color.offset" :min="0" :max="1" :step="0.1"/>
            <el-color-picker class="color-line-item" v-model="color.color" show-alpha/>
            <span class="color-line-item color-ctrl" @click="onRemove(data.linear.colorStops, cIndex)"><i class="el-icon-minus"/></span>
          </div>
        </el-form-item>
      </el-form-item>


      <el-form-item label="径向渐变" v-if="data.colorType === '2'" style="width: 100%;">
        <div class="flex2">
          <el-form-item label="x" class="mb0"><el-input-number v-model="data.radial.x" :min="0" :step="0.1"/></el-form-item>
          <el-form-item label="y" class="mb0"><el-input-number v-model="data.radial.y" :min="0" :step="0.1"/></el-form-item>
          <el-form-item label="r" class="mb0"><el-input-number v-model="data.radial.r" :min="0" :step="0.1"/></el-form-item>
        </div>
        <el-form-item label="应用全局">
          <el-switch v-model="data.radial.global"/>
        </el-form-item>
        <el-form-item label="颜色">
          <i class="el-icon-plus color-ctrl" @click="onAdd(data.radial.colorStops)"/>
          <div class="color-line" v-for="(color, cIndex) in data.radial.colorStops" :key="cIndex">
            <el-input-number class="color-line-item" v-model="color.offset" :min="0" :max="1" :step="0.1"/>
            <el-color-picker class="color-line-item" v-model="color.color" show-alpha/>
            <span class="color-line-item color-ctrl" @click="onRemove(data.radial.colorStops, cIndex)"><i class="el-icon-minus"/></span>
          </div>
        </el-form-item>
      </el-form-item>
    </tm-group>
  </div>
</template>

<script>
import tmRadio from "@/package/components/tm-radio";

export default {
  name: 'geo-item-option',
  cnName: 'geo-item-option',
  components: {
    tmRadio,
  },
  props: {
    title: String,
    data: Object
  },
  data() {
    return {
      borderTypeList: [
        {label: 'solid', value: 'solid'},
        {label: 'dashed', value: 'dashed'},
        {label: 'dotted', value: 'dotted'}
      ],
      colorTypeList: [
        {label: '纯色', value: '0'},
        {label: '线性渐变', value: '1'},
        {label: '径向渐变', value: '2'}
      ]
    }
  },
  methods: {
    onAdd(colors) {
      colors.push({offset: 1, color: ''})
    },
    onRemove(colors, index) {
      colors.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.color-line {
  display: flex;
  margin-bottom: 5px;

  &-item {
    margin-right: 5px;
  }
}
.color-ctrl{
  cursor: pointer;
  color: var(--text-color);
}
</style>
